Related Issue

• Closes: Unmounted Hook State Memory Leaks #473

Description

🧱 The Architectural Context:
React components execute updates dynamically based on continuous state adjustments. If an asynchronous micro-task (like a network fetch or a setTimeout clock) finishes processing after its parent component has already unmounted from the DOM, triggering a state setter function causes a severe memory leak warning in the browser console.

❌ The Failure Mechanism:
The original useDebounce hook initialized a setTimeout scheduler every time a character was typed into a search input. If a user typed a character and immediately clicked a navigation link to change pages before the delay timer finished, the component tree unmounted, but the background browser timer remained active in the event loop. Once the timer completed, it attempted to call setDebouncedValue(value).

💥 The Impact:
This triggered the classic React runtime warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak. In larger applications, thousands of these uncleaned micro-tasks degrade client-side performance, exhaust system memory, and cause sluggish UI responses.

✅ The Solution:
Integrated a persistent tracking reference pointer using useRef(true) alongside an explicit cleanup routine. This ensures that the component safely clears any remaining background timer threads via clearTimeout and flags the tracking node as false the exact millisecond the component unmounts, preventing unmounted state state adjustments entirely.

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update